<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>dataTables-1.0.0</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://cdn.datatables.net/1.5.0/css/demo_table.css"/>
    <script src="jquery.dataTables-1.0.0.js"></script>
    <style>
        .red{
            color:red;
        }
        .blue{
            color:blue;
        }
        .yellow{
            color:yellow;
        }
        .green{
            color:green;
        }
        .even{
            background:white;
        }
        .odd{
            background:gainsboro;
        }
    
    </style>
</head>

<body>

    <table id="table" class="display" style="width:100%">
        <thead>
            <tr>
                <th>asd</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </thead>
        <tbody>
            <tr> <td>1Tiger Nixon</td> <td>1System Architect</td> <td>1Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> </tr>
            <tr> <td>2Tiger Nixon</td> <td>2System Architect</td> <td>2Edinburgh</td> </tr>
            
        </tbody>
    </table>

    <script>

        let dTable1 = null;
        $(document).ready(function () {
            oTable1 = $('#table').dataTable({
                bPaginate: true,
                bLengthChange: false,
                bFilter:false,
                bSort:false,
                bInfo:true, 
                bProcessing:true,
                iDisplayLength:5,
                sZeroRecords:"无记录---",
                // asStripClasses:["red","blue",'yellow',"green"],
                iDefaultSortIndex:0,
                aoData:[
                    { sTitle:"第一列"},
                    { sTitle: "第二列" },
                    { sTitle: "第三列" }
                ],
                fnRowCallback:function (rowDom, rowData, RowCount) {
                    return  rowDom;
                },
            });
        });
    </script>
</body>


</html>